<template>
  <div>
    <h2>Count</h2>
    <h3>movie的电影总共有{{ movieList.length }}个</h3>
    <p>我的count的值是{{ count }}</p>
    <!-- 直接使用插值语法拿到store中的getters中的值 -->
    <!-- <p>我的count的平方很的值是{{ $store.getters.countSqrt }}</p> -->
    <p>我的count的平方很的值是{{ countSqrt }}</p>
    <p>我的num的值是{{ num }}</p>

    <button @click="increament">累加count的值</button>
    <button @click="increamentN({ n: 3 })">count的值加n</button>
    <button @click="incrementWait">等1s再加</button>
    <button @click="incrementNWait({ n: 3 })">等1s再加n</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  mounted() {
    console.log(this);
  },
  computed: {
    // ...mapState("count", ["count", "num"]),
    count() {
      return this.$store.state.count.count;
    },
    num() {
      return this.$store.state.count.num;
    },
    movieList() {
      return this.$store.state.movie.movieList;
    },
    // ...mapGetters("count", ["countSqrt"]),
    countSqrt() {
      return this.$store.getters["count/countSqrt"];
    },
  },
  methods: {
    // ...mapMutations("count", ["increament", "increamentN"]),
    increament() {
      this.$store.commit("count/increament");
    },
    increamentN(payload) {
      this.$store.commit("count/increamentN", payload);
    },
    // ...mapActions("count", ["incrementWait", "incrementNWait"]),
    incrementWait() {
      this.$store.dispatch("count/incrementWait");
    },
    incrementNWait(payload) {
      this.$store.dispatch("count/incrementNWait", payload);
    },
  },
};
</script>

<style></style>
